<section class="vbox">
<section class="scrollable wrapper" >
    <h4 class="m-t-none">编辑菜单 <span class="pull-right "><a href="#" id="colse"><i class="fa fa-times icon-muted fa-fw"></i></a></span></h4>
    <form data-validate="" id="eidtform">
        <div class="form-group">
            <label>名称 <i class="fa fa-info-sign text-xs text-muted">用于后台显示的配置标题</i></label>
            <input type="text" id="title" name="title" class="input-sm form-control" placeholder="菜单名称" data-required="true" value="{{data.title}}">
        </div>
        <div class="form-group">
            <label>排序 <i class="fa fa-info-sign text-xs text-muted">用于分组显示的顺序</i></label>
            <input id="sort" type="text" name="sort" class=" input-sm form-control" placeholder="排序"  value="{{data.sort}}" >
        </div>
        <div class="form-group">
            <label>连接 <i class="fa fa-info-sign text-xs text-muted">如：index/index</i></label>
            <input id="url" type="text" name="url" class=" input-sm form-control" placeholder="url" data-required="true" value="{{data.url}}" >
        </div>
        <div class="form-group">
            <label>上级菜单 <i class="fa fa-info-sign text-xs text-muted">所属的上级菜单</i></label>
            <select class="form-control m-b" name="pid" id="pid" data-pid="{{data.pid}}">
            </select>
        </div>
        <div class="form-group">
            <label>分组 <i class="fa fa-info-sign text-xs text-muted">用于左侧分组二级菜单</i></label>
            <select class="form-control m-b" name="group" id="group">
                {% for index, items in config.setup.MENU_GROUP %}
                <option value="{{index}}"  {% if data.group == index %} selected {% endif %}>{{items}}</option>
                {% endfor%}
            </select>
        </div>
        <div class="form-group">
            <label>是否隐藏 <i class="fa fa-info-sign text-xs text-muted">用于左侧分组二级菜单</i></label>
            <div class="">
            <label class="radio-inline i-checks">
                <input type="radio" value="1" name="hide" {% if data.hide == 1 %}checked{% endif %}>
                <i></i>
                是
            </label>
            <label class="radio-inline i-checks">
                <input type="radio" value="0" name="hide" {% if data.hide == 0 %}checked{% endif %}>
                <i></i>
               否
            </label>
            </div>
        </div>
        <div class="form-group">
            <label>仅开发者模式可见 <i class="fa fa-info-sign text-xs text-muted"></i></label>
            <div class="">
                <label class="radio-inline i-checks">
                    <input type="radio" value="1" name="is_dev" {% if data.is_dev == 1 %}checked{% endif %}>
                    <i></i>
                    是
                </label>
                <label class="radio-inline i-checks">
                    <input type="radio" value="0" name="is_dev" {% if data.is_dev == 0 %}checked{% endif %}>
                    <i></i>
                    否
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>说明 <i class="fa fa-info-sign text-xs text-muted">菜单详细说明</i></label>
            <input id="tip" type="text" name="tip" class=" input-sm form-control" placeholder="说明"  value="{{data.tip}}" >
        </div>
        <div class="form-group">
            <label>图标 <i class="fa fa-info-sign text-xs text-muted">菜单图标，只对一级菜单有效，请使用 <a href="http://fontawesome.io/" target="_blank">fontawesome.io</a> ,默认留空。</i></label>
            <input id="ico" type="text" name="ico" class=" input-sm form-control" placeholder="说明"  value="{{data.ico}}" >
        </div>
        <input id="eid" type="hidden" name="id" value="{{data.id}}">
        <div class="m-t-lg"><button class="btn btn-block btn-primary" id="editbtn">编辑菜单</button></div>
        <div class="m-t-lg"></div>
    </form>
</section>
</section>
<script>

    $(function(){

        $("#colse").click(function(){
            $("#bjax-target").removeClass("show");
        })

        $("#editbtn").on('click',function(){
            $('#eidtform').parsley().validate();
            if (true === $('#eidtform').parsley().isValid()) {
                _editFunAjax();
            }
            return false;
        })
        function _editFunAjax() {
            var id = $("#eid").val();
            var title = $("#title").val();
            var sort = $("#sort").val();
            var url = $("#url").val();
            var pid = $("#pid").val();
            var group = $("#group").val();
            var hide=  $("input[name='hide']:checked").val();
            var is_dev=  $("input[name='is_dev']:checked").val();
            var tip = $("input[name='tip']").val();
            var ico = $("input[name='ico']").val();
            var jsonData = {
                "id":id,
                "title": title,
                "sort": sort,
                "url": url,
                "pid":pid,
                "group":group,
                "hide":hide,
                "is_dev":is_dev,
                "tip":tip,
                "ico":ico
            };
            $.ajax({
                type: 'POST',
                url: '/admin/menu/edit',
                data: jsonData,
                success: function (json) {
                    if (json) {
                        oTable.ajax.reload();
                        toastr.success("编辑成功！")
                    } else {
                        toastr.error("编辑失败！")
                    }
                }
            });
        }

        //获取上级菜单
        $.ajax({
            url: "/admin/menu/getmenu",
            success: function (msg) {
                /* 展示生成的HTML */
                console.log(msg)
                $("#pid").html(category_to_html(msg));

            }
        });
        /* 生成HTML ul/li 形式 */
        function category_to_html(nodes) {
            var html = [];
            var size = nodes.length;
            var left = null;
            var pid = $("#pid").attr("data-pid");
            var selected = null
            if(pid ==0){
                html.push('<option value="0" selected="selected">一级菜单</option>');
            }else {
                html.push('<option value="0" >一级菜单</option>');
            }
            for (var i = 0; i < size; i++) {
                left = nodes[i];

                if(left['id']==pid){
                    html.push('<option value="' + left['id'] +'" selected="selected">'+new Array(left["deep"]+1).join("= ") + left['title'] +  '</option>');

                }else{
                html.push('<option value="' + left['id'] +'"' +pid+'>'+new Array(left["deep"]+1).join("= ") + left['title'] +  '</option>');
                }
            }
            return html.join("\n");
        }
    })
</script>